<template>
  <view>
    <u-navbar :placeholder="true" @leftClick="leftClick"></u-navbar>
    <view class="make">
      <view v-if="info" class="header flex">
        <view class="logo">
          <image :src="info.avatar"></image>
        </view>
        <view class="right">
          <view class="name">
            {{ info.nickName ? info.nickName : info.phone }}
          </view>
          <view class="km">
            个人里程
            <text>{{ (Number(info.mileage) / 1000).toFixed(2) }}km</text>
          </view>
          <view class="p">{{ info.surmount }}</view>
        </view>
        <image
            class="frame"
            src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/Frame80@2x.png"
        ></image>
      </view>

      <view class="content">
        <view class="wrap">
          <view class="map-wrap">
            <view class="title">
              <view class="h1">{{ form.proposalName }}</view>
              <view class="h2">
                您的团队里程
                <text
                >{{ Number(form.teamMileage / 1000).toFixed(2) }}km
                </text
                >
                已超过
                <text>{{ form.exceedancePercentage }}%</text>
                团队
              </view>
            </view>
            <view class="map">
              <map
                  :latitude="latitude"
                  :longitude="longitude"
                  :markers="markers"
                  :polyline="polyline"
                  style="width: 100%; height: 100%"
              >
              </map>
            </view>
          </view>
        </view>

        <view class="cont">
          <view class="title flex">
            通关成绩
            <view class="defen">
              <image
                  mode=""
                  src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/defen.png"
              >
              </image>
              <text>{{ scenList.length ? scenList[0].score : 0 }}</text>
            </view>
          </view>
          <view v-for="(item, index) in scenList" :key="index" class="list">
            <view class="h1">
              <image
                  src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/icon-tips.png"
              ></image>
              <text>{{ item.scenicName }}</text>
              <view v-if="false" class="flex"> {{ item.score }}分</view>
            </view>
            <view v-for="(a, b) in item.taskVos" :key="b" class="h2 flex">
              <text>{{ a.taskName ? a.taskName : "****" }}</text>
              <image
                  :class="a.correct ? '' : 'width_43'"
                  :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${
                  a.correct ? 'fial-red' : 'gou-icon'
                }.png`"
                  class="image"
                  mode=""
              ></image>
            </view>
          </view>
        </view>

        <view v-if="imageUrls.length || apperception" class="cont">
          <image
              class="bgs"
              src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/siyecao.png"
          ></image>
          <view class="title flex"> 行程感悟</view>
          <view class="gan">
            <view v-if="apperception" class="h3">
              {{ apperception }}
            </view>
            <view class="image-list">
              <image
                  v-for="(item, index) in imageUrls"
                  :key="index"
                  :src="item"
                  mode=""
                  @click="can(index, 'imageUrls')"
              ></image>
              <view
                  v-for="(item, index) in 3 - (imageUrls.length % 3)"
                  v-if="imageUrls.length % 3"
                  class="image"
              >
              </view>
            </view>
          </view>
        </view>
        <view v-if="Highlight.length" class="cont">
          <view class="title flex"> 精彩时刻</view>
          <view class="img">
            <image
                v-for="(item, index) in Highlight"
                :key="index"
                :src="item"
                mode=""
                @click="can(index, 'Highlight')"
            ></image>
            <view
                v-for="(item, index) in 3 - (Highlight.length % 3)"
                class="image"
            ></view>
          </view>
        </view>
      </view>
      <zy-modal></zy-modal>
    </view>
  </view>
</template>

<script>
import {
  queryItineraryReportUserInfo,
  queryItineraryReportTaskSituation,
  queryItineraryReportApperception,
  queryItineraryReportHighlightMoment,
  queryItineraryReportProposalInfo,
} from "@/api/login.js";

export default {
  data() {
    return {
      makeInfo: null,
      info: null,
      scenList: [],
      Highlight: [], // 精彩时刻
      apperception: "", //行程感悟内容
      imageUrls: [],
      isGroup: false,
      form: {
        proposalName: "",
        teamMileage: "",
        exceedancePercentage: "",
      },
      longitude: "",
      latitude: "",
      markers: [],
      polyline: [
        {
          points: [],
          color: "#1661B8",
          arrowLine: true,
          width: 5,
        },
      ],
    };
  },
  onLoad(options) {
    console.log("输出", options);
    let type = options.type;
    if (type) {
      this.isGroup = true;
    }
    this.makeInfo = uni.getStorageSync("makeInfo");
    this.init();
  },
  methods: {
    leftClick() {
      uni.reLaunch({
        url: "/pages/tabbar/home",
      });
    },
    can(index, title) {
      uni.previewImage({
        urls: this[title],
        current: index,
      });
    },
    init() {
      queryItineraryReportProposalInfo({
        groupId: this.makeInfo.groupId,
        proposalId: this.makeInfo.proposalId,
      }).then((res) => {
        console.log(res);
        let {scenicVos} = res;
        if (scenicVos && scenicVos.length) {
          this.latitude = scenicVos[0].y;
          this.longitude = scenicVos[0].x;
        }
        this.markers = scenicVos.map((el, index) => {
          return {
            width: 24,
            height: 45,
            id: el.id,
            label: {
              content: el.scenicName,
            },
            content: "content",
            latitude: el.y,
            longitude: el.x,
            iconPath: `https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/location${
                index + 1
            }.png`,
          };
        });
        this.polyline[0].points = scenicVos.map((el) => {
          return {
            latitude: Number(el.y),
            longitude: Number(el.x),
          };
        });

        this.form = res;
      });
      queryItineraryReportUserInfo({
        phone: this.makeInfo.phone,
      }).then((res) => {
        this.info = res;
      });
      queryItineraryReportTaskSituation({
        partyId: this.makeInfo.partyId,
      }).then((res) => {
        this.scenList = res;
      });
      queryItineraryReportApperception({
        itineraryId: this.makeInfo.itineraryId,
        partyId: this.makeInfo.partyId,
      }).then((res) => {
        console.log("行程感悟", res);
        let {apperception, imageUrls} = res[0];
        console.log(imageUrls);
        this.imageUrls = imageUrls;
        this.apperception = apperception;
      });
      queryItineraryReportHighlightMoment({
        itineraryId: this.makeInfo.itineraryId,
        partyId: this.makeInfo.partyId,
      }).then((res) => {
        this.Highlight = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;

  &-cont {
    height: 808rpx;
    background-color: orangered;
  }

  &-header {
    height: 110rpx;
    opacity: 1;
    border-radius: 10rpx 10rpx, 0px, 0px;
    background: linear-gradient(
            180deg,
            rgba(68, 129, 235, 1) 0%,
            rgba(4, 190, 254, 1) 100%
    );
    flex-direction: column;

    view:first-of-type {
      font-size: 32.37rpx;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 46.88rpx;
      color: rgba(255, 255, 255, 1);
    }

    view:last-of-type {
      font-size: 21.58rpx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 31.25rpx;
      color: rgba(255, 255, 255, 1);
      text-align: left;
      vertical-align: middle;
      display: flex;
      align-items: flex-end;

      text {
        font-size: 32.37rpx;
        font-weight: 900;
        letter-spacing: 0px;
        line-height: 38.85rpx;
        color: rgba(255, 235, 59, 1);
      }
    }
  }
}

.wrap {
  width: 100%;
  padding: 28rpx;
  box-sizing: border-box;
}

.map-wrap {
  width: 100%;
  margin-bottom: 20rpx;
  box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24);

  .title {
    width: 100%;
    height: 110rpx;
    border-radius: 10rpx 10rpx 0px 0px;
    background: linear-gradient(
            180deg,
            rgba(68, 129, 235, 1) 0%,
            rgba(4, 190, 254, 1) 100%
    );
    border-bottom: 4px solid rgba(12, 122, 247, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .h1 {
      font-size: 30rpx;
      font-weight: 700;
      line-height: 44rpx;
      color: rgba(255, 255, 255, 1);
    }

    .h2 {
      font-size: 20rpx;
      font-weight: 500;
      line-height: 29rpx;
      color: rgba(255, 255, 255, 1);

      text {
        font-size: 30rpx;
        font-weight: 900;
        line-height: 36rpx;
        color: rgba(255, 235, 59, 1);
      }
    }
  }

  .map {
    width: 100%;
    height: 610rpx;
    border-radius: 0px 0px 10rpx 10rpx;
  }
}

.gan {
  padding: 33rpx 28rpx 66rpx;

  .h3 {
    font-size: 40rpx;
    font-weight: 400;
    letter-spacing: 0pt;
    line-height: 54.88rpx;
    color: rgba(56, 56, 56, 1);
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    justify-content: space-between;

    image {
      flex-shrink: 0;
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 20rpx;
      position: relative;
      z-index: 9;
    }

    .image {
      width: 180rpx;
      height: 180rpx;
    }
  }
}

.img {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30rpx;
  padding: 0 10rpx 30rpx;
  justify-content: space-between;

  image {
    flex-shrink: 0;
    width: 219.35rpx;
    height: 292.02rpx;
    margin-bottom: 20rpx;
  }

  .image {
    flex-shrink: 0;
    width: 219.35rpx;
    height: 292.02rpx;
  }
}

.header {
  padding: 40rpx 30rpx 30rpx 40rpx;
  opacity: 1;
  background: linear-gradient(
          180deg,
          rgba(144, 198, 252, 1) 0%,
          rgba(255, 255, 255, 0) 100%
  );
  display: flex;
  align-items: center;

  .frame {
    width: 148rpx;
    height: 148rpx;
  }

  .logo {
    width: 160rpx;
    height: 160rpx;
    opacity: 1;
    box-sizing: border-box;
    border: 8rpx solid rgba(42, 130, 228, 1);
    border-radius: 160rpx;
    overflow: hidden;

    image {
      width: 144rpx;
      height: 144rpx;
      border-radius: 50%;
    }
  }

  .right {
    flex: 1;
    height: 160rpx;
    display: flex;
    margin-left: 30rpx;
    flex-direction: column;

    .name {
      font-size: 40rpx;
      font-weight: 700;
      letter-spacing: 0pt;
      line-height: 57.92rpx;
      color: rgba(50, 57, 67, 1);
    }

    .km {
      font-size: 20rpx;
      font-weight: 500;
      letter-spacing: 0pt;
      line-height: 36rpx;
      flex: 1;
      color: rgba(56, 56, 56, 1);
      display: flex;
      align-items: flex-end;

      text {
        font-size: 48rpx;
        font-weight: 700;
        letter-spacing: 0pt;
        color: rgba(7, 171, 160, 1);
      }
    }

    .p {
      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: 0pt;
      line-height: 34.75rpx;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      margin-top: 10rpx;
    }
  }
}

.content {
  padding: 28rpx;

  .cont {
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0pt 3rpx 12rpx -3rpx rgba(0, 0, 0, 0.24);
    margin-bottom: 30rpx;
    position: relative;

    .bgs {
      position: absolute;
      width: 140rpx;
      height: 159.11rpx;
      opacity: 0.5;
      bottom: 0;
      right: 0;
    }

    .title {
      height: 90rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      opacity: 1;
      border-radius: 10rpx 10rpx, 0pt, 0pt;
      background: rgba(43, 122, 251, 1);
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0pt;
      color: rgba(255, 255, 255, 1);
      position: relative;

      .defen {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        font-size: 55rpx;
        font-weight: 900;
        letter-spacing: 0pt;
        line-height: 79.64rpx;
        color: rgba(212, 48, 48, 1);
        text-align: center;

        text {
          position: absolute;
          width: 100%;
          padding-top: 60rpx;
          top: 0;
          left: 0;
        }

        image {
          width: 130rpx;
          height: 155rpx;
        }
      }
    }

    .list {
      padding: 20rpx 0;
      margin: 0 20rpx;
      border-bottom: 2rpx solid rgba(166, 166, 166, 1);

      .h1 {
        display: flex;
        height: 55rpx;
        align-items: center;

        image {
          width: 45rpx;
          height: 45rpx;
        }

        text {
          font-size: 36rpx;
          font-weight: 400;
          letter-spacing: 0pt;
          color: rgba(0, 0, 0, 1);
          flex: 1;
          margin-left: 15rpx;
        }

        view {
          width: 130rpx;
          height: 55rpx;
          opacity: 1;
          border-radius: 20rpx;
          border: 2rpx solid rgba(201, 148, 2, 1);
          font-size: 30rpx;
          font-weight: 500;
          letter-spacing: 0pt;
          color: rgba(201, 148, 2, 1);
        }
      }

      .h2 {
        font-size: 32rpx;
        font-weight: 400;
        letter-spacing: 0pt;
        line-height: 46.34rpx;
        color: rgba(56, 56, 56, 1);
        margin-top: 10rpx;
        position: relative;
        padding-right: 0rpx;
        align-items: flex-start;

        text {
          flex: 1;
        }

        image {
          margin-top: 6rpx;
          margin-left: 10rpx;
          flex-shrink: 0;
          width: 35rpx;
          height: 35rpx;
          padding: 0 4rpx;
        }

        .width_43 {
          width: 43rpx;
          height: 32rpx;
          padding: 1.5rpx 0;
        }
      }
    }

    .list:last-of-type {
      border-bottom: none;
    }
  }
}
</style>
